<template>
  <div class="x6-demo-container">
    <div ref="container" id="container" class="x6-graph-container"></div>
  </div>
</template>

<script setup>
import CustomVueNode from "./CustomVueNode.vue"
import { onMounted, ref } from 'vue';
import { Graph } from '@antv/x6';
import { register } from '@antv/x6-vue-shape';

const container = ref(null);
let graph = null;

// 注册 Vue 节点
// 修正后的 Vue 节点注册
// register({
//   shape: 'vue-node',
//   width: 160,  // 调整为更合适的宽度
//   height: 50, // 调整为更合适的高度
//   component: {
//     template: `<div style=""><CustomVueNode /></div>`,
//     components: { CustomVueNode }
//   },
//   effect: ['data'] // 确保数据变化能响应
// });

register({
  shape: 'vue-node',
  width: 100,
  height: 80,
  component: CustomVueNode,
  inherit: 'rect', // 继承自 rect 而不是默认的 foreignObject
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    }
  ],
  attrs: {
    body: {
      fill: 'red', // 透明背景
      stroke: 'none',      // 无边框
      refWidth: '100%',
      refHeight: '100%'
    }
  }
})

// Graph.registerNode('custom-svg-node', {
//   width: 100,
//   height: 60,
//   markup: [
//     {
//       tagName: 'rect',
//       selector: 'body'
//     },
//     {
//       tagName: 'text',
//       selector: 'label'
//     }
//   ],
//   attrs: {
//     body: {
//       fill: '#5F95FF',
//       stroke: '#5F95FF',
//       rx: 4,
//       ry: 4
//     },
//     label: {
//       text: '自定义节点',
//       fill: '#fff',
//       fontSize: 12,
//       refX: '50%',
//       refY: '50%',
//       textAnchor: 'middle',
//       textVerticalAnchor: 'middle'
//     }
//   }
// })

Graph.registerNode(
  'org-node',
  {
    width: 180,
    height: 80,
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'image',
        selector: 'avatar',
      },
      {
        tagName: 'text',
        selector: 'rank',
      },

      {
        tagName: 'text',
        selector: 'tagcode',
      },
      {
        tagName: 'text',
        selector: 'name',
      },
    ],
    attrs: {
      body: {
        refWidth: '100%',
        refHeight: '100%',
        fill: '#5F95FF',
        stroke: '#5F95FF',
        strokeWidth: 1,
        rx: 10,
        ry: 10,
        pointerEvents: 'visiblePainted',
      },
      avatar: {
        width: 48,
        height: 48,
        refX: 8,
        refY: 6,
      },
      rank: {
        refX: 0.9,
        refY: 0.2,
        fill: '#fff',
        fontFamily: 'Courier New',
        fontSize: 14,
        textAnchor: 'end',
        textDecoration: 'underline',
      },
      name: {
        refX: 0.9,
        refY: 0.6,
        fill: '#fff',
        fontFamily: 'Courier New',
        fontSize: 14,
        fontWeight: '800',
        textAnchor: 'end',
      },

      tagcode: {
        refX: 0.9,
        refY: 0.9,
        fill: 'red',
        fontFamily: 'Courier New',
        fontSize: 14,
        fontWeight: '800',
        textAnchor: 'end',
      }
    },
  },
  true,
);

Graph.registerEdge(
  'org-edge',
  {
    zIndex: -1,
    attrs: {
      line: {
        fill: 'none',
        strokeLinejoin: 'round',
        strokeWidth: 2,
        stroke: '#A2B1C3',
        sourceMarker: null,
        targetMarker: null,
      },
    },
  },
  true,
);

function add_self_node(x, y) {
  // return;
  // 使用
  return graph.addNode({
    x: x,
    y: y,
    shape: 'vue-node',
    data: { title: 'Vue Node' }, // 传递给组件的 props
  });
}


function member(x, y, rank, name, image, tagcode) {
  return graph.addNode({
    x,
    y,
    shape: 'org-node',
    attrs: {
      avatar: {
        opacity: 0.7,
        'xlink:href': image,
      },
      rank: {
        text: rank,
        wordSpacing: '-7px',
        letterSpacing: 0,
      },
      tagcode: {
        text: tagcode,
        wordSpacing: '-5px',
        letterSpacing: 0,
      },
      name: {
        text: name,
        fontSize: 13,
        fontFamily: 'Arial',
        letterSpacing: 0,
      },

    },
  });
}

function link(source, target, vertices) {
  return graph.addEdge({
    vertices,
    source: {
      cell: source,
    },
    target: {
      cell: target,
    },
    attrs: {
      line: {
        stroke: '#A2B1C3',
        strokeWidth: 2
      }
    },
    shape: 'org-edge',
  });
}
onMounted(() => {
  graph = new Graph({
    panning: {
      enabled: true,

      modifiers: 'space',
      eventTypes: "leftMouseDown"
    },

    scaling: {
      min: 0.05, // 默认值为 0.01
      max: 1, // 默认值为 16
    },

    mousewheel: {
      enabled: true,
      modifiers: ['ctrl', 'meta'],

      guard(e) {
        if (e.altKey) {
          // 当按下 alt 键时，忽略所有滚动事件
          return false
        }
        return true
      },
    },

    grid: {
      size: 10, // 网格大小 10px
      visible: true, // 绘制网格，默认绘制 dot 类型网格
      args: {
        color: '#a0a0a0', // 网点颜色
        thickness: 1, // 网点大小
      },
    },
    container: container.value,
    connecting: {
      anchor: 'orth',
    },
  });

  setTimeout(() => {
    graph.addNode({
      x: 300,
      y: 200,
      attrs: {
        title: "11123"
      },
      shape: 'vue-node',
      data: { title: 'Vue Node' }, // 传递给组件的 props
    });
  }, 100)

  setTimeout(() => {
    console.log("graph.toJSON()", graph.toJSON())
    graph.toJSON()
  }, 3000)






  const male = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ';
  const female = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*f6hhT75YjkIAAAAAAAAAAAAAARQnAQ';

  const bart = member(300, 70, 'CEO', 'Bart Simpson', male, "P(kW)");
  const homer = member(90, 200, 'VP Marketing', 'Homer Simpson', male, "P(kW)");
  const marge = member(300, 200, 'VP Sales', 'Marge Simpson', female, "P(kW)");
  const lisa = member(500, 200, 'VP Production', 'Lisa Simpson', female, "P(kW)");
  const maggie = member(400, 350, 'Manager', 'Maggie Simpson', female, "P(kW)");
  const lenny = member(190, 350, 'Manager', 'Lenny Leonard', male, "P(kW)");
  const carl = member(190, 500, 'Manager', 'Carl Carlson', male, "P(kW)");

  let self_node = add_self_node(360, 600)

  link(bart, marge, [{ x: 385, y: 180 }]);
  link(bart, homer, [
    { x: 385, y: 180 },
    { x: 175, y: 180 },
  ]);
  link(bart, lisa, [
    { x: 385, y: 180 },
    { x: 585, y: 180 },
  ]);
  link(homer, lenny, [{ x: 175, y: 380 }]);
  link(homer, carl, [{ x: 175, y: 530 }]);
  link(marge, maggie, [{ x: 385, y: 380 }]);

  graph.zoomToFit({ padding: 20, maxScale: 1 });
});
</script>

<style scoped>
.x6-demo-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.x6-graph-container {
  width: 800px;
  height: 600px;
  border: 1px solid #d9d9d9;
  margin: 0 auto;
}
</style>